<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频音频合并测试</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
            text-align: center;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        input[type="file"], input[type="text"], input[type="number"], select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
        }
        input[type="number"] {
            width: calc(50% - 10px);
            display: inline-block;
        }
        .number-group {
            display: flex;
            gap: 20px;
        }
        .number-group .form-group {
            flex: 1;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            width: 100%;
            margin-top: 20px;
        }
        button:hover {
            background-color: #0056b3;
        }
        button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 4px;
            display: none;
        }
        .success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        .error {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        .progress {
            margin-top: 20px;
            display: none;
        }
        .progress-bar {
            width: 100%;
            height: 20px;
            background-color: #e9ecef;
            border-radius: 10px;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            background-color: #007bff;
            width: 0%;
            transition: width 0.3s ease;
        }
        .info {
            background-color: #e7f3ff;
            border-left: 4px solid #007bff;
            padding: 15px;
            margin: 15px 0;
        }
        .warning {
            background-color: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 15px;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>视频音频合并测试</h1>
        
        <div class="info">
            <strong>功能说明：</strong>
            <ul>
                <li>支持混合音频和替换原音频两种模式</li>
                <li>可调节原音频和新音频的音量</li>
                <li>支持淡入淡出效果</li>
                <li>输出格式为MP4</li>
            </ul>
        </div>
        
        <div class="warning">
            <strong>注意事项：</strong>
            <ul>
                <li>视频文件支持：mp4, avi, mov, mkv, wmv, flv, webm</li>
                <li>音频文件支持：mp3, wav, aac, ogg</li>
                <li>文件大小限制：500MB</li>
                <li>处理大文件时可能需要较长时间</li>
            </ul>
        </div>
        
        <form id="mergeForm">
            <div class="form-group">
                <label for="videoFile">选择视频文件：</label>
                <input type="file" id="videoFile" name="video" accept="video/*" required>
            </div>
            
            <div class="form-group">
                <label for="audioFile">选择音频文件：</label>
                <input type="file" id="audioFile" name="audio" accept="audio/*" required>
            </div>
            
            <div class="form-group">
                <label for="mergeType">合并类型：</label>
                <select id="mergeType" name="merge_type">
                    <option value="mix">混合音频</option>
                    <option value="replace">替换原音频</option>
                </select>
            </div>
            
            <div class="number-group">
                <div class="form-group">
                    <label for="originalVolume">原音频音量：</label>
                    <input type="number" id="originalVolume" name="original_volume" 
                           value="1.0" min="0.0" max="2.0" step="0.1">
                </div>
                <div class="form-group">
                    <label for="newAudioVolume">新音频音量：</label>
                    <input type="number" id="newAudioVolume" name="new_audio_volume" 
                           value="1.0" min="0.0" max="2.0" step="0.1">
                </div>
            </div>
            
            <div class="number-group">
                <div class="form-group">
                    <label for="fadeInDuration">淡入时长（秒）：</label>
                    <input type="number" id="fadeInDuration" name="fade_in_duration" 
                           value="0" min="0" step="0.1">
                </div>
                <div class="form-group">
                    <label for="fadeOutDuration">淡出时长（秒）：</label>
                    <input type="number" id="fadeOutDuration" name="fade_out_duration" 
                           value="0" min="0" step="0.1">
                </div>
            </div>
            
            <button type="submit" id="submitBtn">开始合并</button>
        </form>
        
        <div class="progress" id="progress">
            <p>正在处理中，请稍候...</p>
            <div class="progress-bar">
                <div class="progress-fill" id="progressFill"></div>
            </div>
        </div>
        
        <div class="result" id="result"></div>
    </div>

    <script>
        document.getElementById('mergeForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const submitBtn = document.getElementById('submitBtn');
            const progress = document.getElementById('progress');
            const result = document.getElementById('result');
            
            // 重置界面
            submitBtn.disabled = true;
            progress.style.display = 'block';
            result.style.display = 'none';
            
            // 模拟进度条
            let progressValue = 0;
            const progressFill = document.getElementById('progressFill');
            const progressInterval = setInterval(() => {
                progressValue += Math.random() * 10;
                if (progressValue > 90) progressValue = 90;
                progressFill.style.width = progressValue + '%';
            }, 200);
            
            try {
                const formData = new FormData();
                
                // 添加文件
                const videoFile = document.getElementById('videoFile').files[0];
                const audioFile = document.getElementById('audioFile').files[0];
                
                if (!videoFile || !audioFile) {
                    throw new Error('请选择视频和音频文件');
                }
                
                formData.append('video', videoFile);
                formData.append('audio', audioFile);
                
                // 添加参数
                formData.append('merge_type', document.getElementById('mergeType').value);
                formData.append('original_volume', document.getElementById('originalVolume').value);
                formData.append('new_audio_volume', document.getElementById('newAudioVolume').value);
                formData.append('fade_in_duration', document.getElementById('fadeInDuration').value);
                formData.append('fade_out_duration', document.getElementById('fadeOutDuration').value);
                
                // 发送请求
                const response = await fetch('/video/merge_audio', {
                    method: 'POST',
                    body: formData
                });
                
                clearInterval(progressInterval);
                progressFill.style.width = '100%';
                
                if (response.ok) {
                    // 下载文件
                    const blob = await response.blob();
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'merged_video_audio.mp4';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    window.URL.revokeObjectURL(url);
                    
                    // 显示成功消息
                    result.className = 'result success';
                    result.innerHTML = `
                        <h3>✅ 合并成功！</h3>
                        <p>文件已自动下载为 merged_video_audio.mp4</p>
                        <p><strong>处理参数：</strong></p>
                        <ul>
                            <li>合并类型：${document.getElementById('mergeType').value === 'mix' ? '混合音频' : '替换原音频'}</li>
                            <li>原音频音量：${document.getElementById('originalVolume').value}</li>
                            <li>新音频音量：${document.getElementById('newAudioVolume').value}</li>
                            <li>淡入时长：${document.getElementById('fadeInDuration').value}秒</li>
                            <li>淡出时长：${document.getElementById('fadeOutDuration').value}秒</li>
                        </ul>
                    `;
                } else {
                    const errorData = await response.json();
                    throw new Error(errorData.error || '合并失败');
                }
                
            } catch (error) {
                clearInterval(progressInterval);
                result.className = 'result error';
                result.innerHTML = `
                    <h3>❌ 合并失败</h3>
                    <p>错误信息：${error.message}</p>
                `;
            } finally {
                submitBtn.disabled = false;
                progress.style.display = 'none';
                result.style.display = 'block';
            }
        });
        
        // 根据合并类型调整界面
        document.getElementById('mergeType').addEventListener('change', function() {
            const originalVolumeGroup = document.getElementById('originalVolume').parentElement;
            if (this.value === 'replace') {
                originalVolumeGroup.style.opacity = '0.5';
                document.getElementById('originalVolume').disabled = true;
            } else {
                originalVolumeGroup.style.opacity = '1';
                document.getElementById('originalVolume').disabled = false;
            }
        });
        
        // 初始化界面
        document.getElementById('mergeType').dispatchEvent(new Event('change'));
    </script>
</body>
</html> 